<!-- 模块说明 -->
<template>
    <div class="city">
        <h2>热门城市</h2>
        <div v-for="(item, i) in cityList" :key="i">
            <span v-for="ite in item.data" :key="ite.cityId" class="atie">
                <i @click="setCity(ite.name)" v-if="ite.isHot">{{ ite.name }}</i>
            </span>
        </div>
        <van-index-bar>
            <div v-for="(item, i) in cityList" :key="i">
                <van-index-anchor :index="item.letter.toUpperCase()" />
                <p @click="setCity(ite.name)" v-for="ite in item.data" :key="ite.cityId">
                    {{ ite.name }}
                </p>
            </div>
        </van-index-bar>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getCityList } from "../../api/index"
import { useRouter } from 'vue-router';
const router = useRouter()
interface ICity {
    letter: string;
    data: { cityId: number; name: string; pinyin: string; isHot: number }[];
}
// const city = ref<string>("")
const cityList = ref<ICity[]>([]);
const getCities = async () => {
    let res = await getCityList();
    console.log(res, "aa");
    cityList.value = res.data;
};
const setCity = (value: string) => {
    localStorage.setItem("city", value)
    router.push("/")
}
onMounted(() => {
    getCities();
});
</script>
<style lang="scss" scoped>
.city {
    p {
        padding: 10px 20px;
        border-bottom: 1px solid #e1e1e1;
    }

    .atie {
        display: flex;

        >i {
            margin: 0 auto;
            padding: 2px 0;
        }
    }
}
</style>
